﻿@{
    ViewData["Title"] = "权限管理";
}
<div id="container">
    <style>

        .l220 {
            left: 220px;
            background-color: #ffffff;
            border-right: 1px solid #e4eaec;
        }

            .l220 .layui-nav-title {
                background-color: #ffffff;
                position: relative;
                font-weight: normal;
                border-bottom: 1px solid #e4eaec;
            }

        .role li a {
            display: block;
            padding: 15px 20px;
        }

        .role li.active a {
            background-color: #f3f7f9;
            color: #409eff;
        }

        .l440 {
            left: 441px;
        }

            .l440 .layui-nav-title {
                width: 100%;
                height: 70px;
                line-height: 70px;
                background: #d9dee4;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: bold;
                text-indent: 20px;
                background-color: #ffffff;
                position: relative;
                font-weight: normal;
                border-bottom: 1px solid #e4eaec;
            }

        .menu-wall .layui-tree-cus {
            overflow: auto;
        }

            .menu-wall .layui-tree-cus li {
                padding: 4px 0;
            }

            .menu-wall .layui-tree-cus ul li {
                padding-left: 35px;
                line-height: 30px;
            }

            .menu-wall .layui-tree-cus span {
                cursor: pointer;
            }

        .menu-wall {
            padding: 15px;
        }

            .menu-wall .layui-tree-cus .btnfun {
                display: inline-block;
                margin-left: 50px;
                text-align: right;
            }

                .menu-wall .layui-tree-cus .btnfun label {
                    margin-left: 25px;
                }

        .menu-save {
            padding: 10px;
            text-align: center;
        }
    </style>
    <div id="app">
        <div class="layui-col-220">
            <div class="layui-nav-title">组织机构</div>
            <ul id="tree" class="ztree layui-tree-cus"></ul>
        </div>
        <div class="layui-col-220 l220">
            <div class="layui-nav-title">角色列表</div>
            <ul class="role">
                <li :class="index==roleActive?'active':''" v-for="(it,index) in roleList" v-cloak @@click="roleGoMenu(it,index)"><a href="javascript:void(0)">{{it.Name}}</a></li>
            </ul>
        </div>
        <div class="right-col-body l440">
            <div class="layui-nav-title">菜单列表</div>
            <div class="menu-wall soa-cur">
                <ul class="layui-tree-cus">
                    <li class="item" v-for="(a,index) in menuList" v-if="a.layer==1" v-cloak>
                        <div class="bold">
                            <span><i class="layui-icon layui-icon-triangle-d"></i></span>
                            <a href="javascript:void(0)"><label><input type="checkbox" :checked="a.isChecked?'checked':''" name="cbkmenu" :value="a.guid" @@click="selectCbk(a,$event)" />{{a.name}}</label> </a>
                        </div>
                        <ul>
                            <li class="item" v-for="(b,index) in menuList" v-if="b.layer==2 && b.parentID==a.guid">
                                <div class="bold">
                                    <span><i class="layui-icon layui-icon-triangle-d"></i></span>
                                    <a href="javascript:void(0)"><label><input type="checkbox" :checked="b.isChecked?'checked':''" name="cbkmenu" :value="b.guid" @@click="selectCbk(b,$event)" />{{b.name}}</label></a>
                                </div>
                                <ul>
                                    <li class="item" v-for="(c,index) in menuList" v-if="c.layer==3 && c.parentID==b.guid">
                                        <div>
                                            <a href="javascript:void(0)"><label><input type="checkbox" :checked="c.isChecked?'checked':''" name="cbkmenu" :value="c.guid" @@click="selectCbk(c,$event)" />{{c.name}}</label></a>
                                            <div class="btnfun">
                                                <label v-for="(d,index) in c.btnFun"><input type="checkbox" :checked="d.status?'checked':''" name="cbkbtnfun" :value="d.guid" @@click="selectbtnFunCbk(d,c,$event)" />{{d.name}}</label>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="menu-save layui-cur-submit">
                    <button type="button" class="layui-btn" id="submit" onclick="fun.saveMenu()"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>保存权限</button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="~/themes/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <script src="~/js/modules/vue.js"></script>
    @section Scripts{
        <script type="text/javascript">
            var api, $, fun, vm = new Vue({
                el: '#app',
                data: {
                    roleList: [],
                    roleActive: 0,
                    roleID: '',
                    menuList: []
                },
                methods: {
                    roleGoMenu: function (m, index) {
                        var that = this;
                        layer.confirm('授权功能尚未保存，是否确认查看其它角色权限？', function (is) {
                            layer.close(is);
                            that.roleActive = index;
                            that.roleID = m.ID;
                            that.menuList = [];
                            fun.menuList(m.ID);
                        });
                    },
                    selectCbk: function (m, e) {
                        var that = this;
                        if (m.layer === 1) {
                            for (var i = 0; i < that.menuList.length; i++) {
                                if (e.target.checked) {
                                    that.menuList[i].isChecked = true;
                                }
                                else {
                                    that.menuList[i].isChecked = false;
                                }
                            }
                        }
                        if (m.layer === 2) {
                            for (var i = 0; i < that.menuList.length; i++) {
                                if (that.menuList[i].guid == m.guid || that.menuList[i].parentID == m.guid || that.menuList[i].guid == m.parentID) {
                                    if (e.target.checked) {
                                        that.menuList[i].isChecked = true;
                                    }
                                    else {
                                        if (that.menuList[i].guid != m.parentID) {
                                            that.menuList[i].isChecked = false;
                                        }
                                    }
                                }
                            }
                        }
                        if (m.layer == 3) {
                            for (var i = 0; i < that.menuList.length; i++) {
                                if (that.menuList[i].guid == m.guid || that.menuList[i].guid == m.parentID) {
                                    if (e.target.checked) {
                                        that.menuList[i].isChecked = true;
                                    }
                                    else {
                                        if (that.menuList[i].guid != m.parentID) {
                                            that.menuList[i].isChecked = false;
                                        }
                                    }
                                }
                            }
                            if (m.btnFun) {
                                for (var i = 0; i < that.menuList.length; i++) {
                                    if (that.menuList[i].guid == m.guid) {
                                        if (that.menuList[i].btnFun) {
                                            for (var j = 0; j < that.menuList[i].btnFun.length; j++) {
                                                if (e.target.checked) {
                                                    that.menuList[i].btnFun[j].status = true;
                                                } else {
                                                    that.menuList[i].btnFun[j].status = false;
                                                }
                                            }
                                        }
                                    }
                                }

                            }
                        }
                        //console.log(e.target.checked);
                    },
                    selectbtnFunCbk: function (m, p, e) {
                        var that = this;
                        for (var i = 0; i < that.menuList.length; i++) {
                            if (that.menuList[i].btnFun) {
                                for (var j = 0; j < that.menuList[i].btnFun.length; j++) {
                                    if (that.menuList[i].btnFun[j].guid == m.guid && that.menuList[i].guid == p.guid) {
                                        if (e.target.checked) {
                                            that.menuList[i].btnFun[j].status = true;
                                            return;
                                        } else {
                                            that.menuList[i].btnFun[j].status = false;
                                            return;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            });

            layui.config({
                base: '/js/modules/'
            }).use(['table', 'layer', 'jquery', 'ztree', 'api'],
                function () {
                    $ = layui.jquery,
                        api = layui.api;
                    var setting = {
                        async: {
                            enable: true,
                            headers: api.getToken(),
                            url: "/Sys/Organize/GetTree"
                        },
                        callback: {
                            onClick: onClick
                        }
                    };
                    $('.layui-tree-cus').css({ 'height': $(window).height() - 220 });
                    fun = {
                        //根据部门查询角色
                        initRole: function (guid) {
                            api.ajax('Sys/Role/GetPages', 'post', { key: guid }, function (res) {
                                if (res.count != 0) {
                                    vm.roleList = res.data;
                                    //默认第一条选中
                                    vm.roleID = vm.roleList[0].ID;
                                    vm.roleActive = 0;
                                    fun.menuList(vm.roleID);
                                }
                            });
                        },
                        //根据角色查询菜单和权限
                        menuList: function (roleguid) {
                            api.ajax('Sys/Menu/Authorizaion', 'post', { parm: roleguid }, function (res) {
                                if (res.statusCode === 200) {
                                    vm.menuList = res.data;
                                    vm.$nextTick(function () {
                                        //展开和关闭
                                        $('.layui-tree-cus li span').click(function () {
                                            var ul = $(this).parent().parent().find("ul");
                                            ul.is(':hidden') ? ul.show() : ul.hide();
                                        });
                                    });
                                } else {
                                    api.error(res.msg);
                                }
                            });
                        },
                        saveMenu: function () {
                            $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                            api.ajax('Sys/RoleMenu/AddAuthorization', 'post', { list: vm.menuList, roleID: vm.roleID },
                                function (res) {
                                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                                    if (res.statusCode === 200) {
                                        api.success('授权成功~');
                                    } else {
                                        api.error(res.msg);
                                    }
                                });
                        }
                    };
                    fun.initRole('');
                    $.fn.zTree.init($("#tree"), setting);

                    function onClick(event, treeId, treeNode, clickFlag) {
                        fun.initRole(treeNode.guid);
                    }

                });
        </script>
    }
</div>
